<script setup lang="ts">
import { ref } from 'vue'
import useAppStore from '@/stores/modules/app'

const appStore = useAppStore()
const isDark = ref<boolean>(appStore.theme === 'dark')

const menuList = [
  { title: '收藏', icon: 'bookmark-o' },
  { title: '朋友圈', icon: 'friends-o' },
  { title: '视频号', icon: 'video-o' },
  { title: '卡包', icon: 'credit-pay' },
  { title: '表情', icon: 'smile-o' },
]

const changeTheme = () => {
  const theme = isDark.value ? 'dark' : 'light'
  appStore.setTheme(theme)
}
</script>

<template>
  <section class="page-container">
    <van-cell-group class="md-2">
      <van-cell size="large" style="padding-top: 46px">
        <template #title>
          <span style="font-size: 24px; padding-left: 16px; line-height: 32px">阿古朵</span>
        </template>

        <template #icon>
          <van-image
            width="64px"
            height="64px"
            fit="cover"
            position="center"
            radius="8px"
            src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/533/533.jpg"
          />
        </template>

        <template #label>
          <div style="padding-left: 16px; line-height: 32px">微信号: aguduo</div>
          <div style="padding: 10px 16px">
            <van-button round plain size="mini" icon="plus">状态&nbsp;</van-button>
            <van-button round plain size="mini" icon="replay"></van-button>
          </div>
        </template>

        <template #right-icon>
          <span style="margin-top: 40px; color: var(--van-gray-6)">
            <van-icon name="qr" style="margin-right: 10px" />
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-space direction="vertical" fill size="8px">
      <van-cell-group>
        <van-cell title="服务" size="large" is-link>
          <template #icon>
            <van-icon
              name="like-o"
              style="
                font-size: 20px;
                line-height: 24px;
                margin-right: 16px;
                color: var(--van-danger-color);
              "
            />
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.title"
          size="large"
          is-link
        >
          <template #icon>
            <van-icon
              :name="item.icon"
              style="
                font-size: 20px;
                line-height: 24px;
                margin-right: 16px;
                color: var(--van-danger-color);
              "
            />
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell title="深色主题" size="large">
          <template #icon>
            <van-icon
              name="brush-o"
              style="
                font-size: 20px;
                line-height: 24px;
                margin-right: 16px;
                color: var(--van-danger-color);
              "
            />
          </template>
          <template #right-icon>
            <van-switch
              v-model="isDark"
              active-color="var(--van-success-color)"
              @change="changeTheme"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </van-space>
  </section>
</template>

<style scoped></style>
